<template>
  <div class="LeftTop">
    <h3>近7日人口涌入统计</h3>
    <!-- Tab 切换 -->
    <el-tabs v-model="activeCity" @click="handleTabClick">
      <el-tab-pane v-for="city in cities" :key="city.name" :label="city.name" :name="city.name"></el-tab-pane>
    </el-tabs>
    <!-- 图表容器 -->
    <div class="chart" id="main" style="width: 400px; height: 250px;"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  data() {
    return {
      activeCity: '北京',
      cities: [
        {
          name: '北京',
          data: [
            { data: '3.7', value: 1200 },
            { data: '3.8', value: 1300 },
            { data: '3.9', value: 1100 },
            { data: '3.10', value: 1400 },
            { data: '3.11', value: 1500 },
            { data: '3.12', value: 1600 },
            { data: '3.13', value: 1700 }
          ]
        },
        {
          name: '上海',
          data: [
            { data: '3.7', value: 1000 },
            { data: '3.8', value: 1100 },
            { data: '3.9', value: 1200 },
            { data: '3.10', value: 1300 },
            { data: '3.11', value: 1400 },
            { data: '3.12', value: 1500 },
            { data: '3.13', value: 1600 }
          ]
        },
        {
          name: '广州',
          data: [
            { data: '3.7', value: 800 },
            { data: '3.8', value: 900 },
            { data: '3.9', value: 1000 },
            { data: '3.10', value: 1100 },
            { data: '3.11', value: 1200 },
            { data: '3.12', value: 1300 },
            { data: '3.13', value: 1400 }
          ]
        },
        {
          name: '深圳',
          data: [
            { data: '3.7', value: 900 },
            { data: '3.8', value: 1000 },
            { data: '3.9', value: 1100 },
            { data: '3.10', value: 1200 },
            { data: '3.11', value: 1300 },
            { data: '3.12', value: 1400 },
            { data: '3.13', value: 1500 }
          ]
        }
      ],
      myChart: null // 用于保存 ECharts 实例
    };
  },
  methods: {
    // 初始化图表
    initChart() {
      // const chartDom = document.getElementById('main');
      this.myChart = echarts.init(document.getElementById('main'));
      this.updateChart('北京'); // 默认显示北京的数据
    },
    // 更新图表数据
    updateChart(cityName) {
      const cityData = this.cities.find(city => city.name === cityName);
      const xAxisData = cityData.data.map(item => item.data); // X 轴数据（日期）
      //  Echarts支持多系列图表(同时显示多条折线)，所以要将每个系列的数据单独配置
      const seriesData = [{
        name: cityData.name,
        type: 'line',
        data: cityData.data.map(item => item.value), // Y 轴数据（人口涌入值）
        lineStyle: {
          color: '#1abc9c' // 折线颜色
        },
        itemStyle: {
          color: '#1abc9c' // 数据点颜色
        }
      }];

      // 配置项
      const option = {
        // 提示
        tooltip: {
          trigger: 'axis',//触发方式：表示当鼠标悬停在 X 轴的某个位置时，会显示该位置所有系列的数据。
          backgroundColor: 'rgba(0, 0, 0, 0.8)', // 提示框背景色
          textStyle: {
            color: '#ffffff' // 提示框文字颜色
          }
        },
        // 1、
        xAxis: {
          type: 'category',//适用于离散的类目数据
          data: xAxisData,
          name: '日期',
          axisLine: {
            lineStyle: {
              color: '#ffffff' // X 轴颜色
            }
          },
          axisLabel: {
            color: '#ffffff' // X 轴标签颜色
          }
        },
        // 2、
        //yAxis 不直接包含数据，而是与 seriesData 配合使用，决定如何将数据映射到 Y 轴上。
        yAxis: {
          type: 'value',//适用于连续的数据
          name: '人口涌入值',
          axisLine: {
            lineStyle: {
              color: '#ffffff' // Y 轴颜色
            }
          },
          axisLabel: {
            color: '#ffffff' // Y 轴标签颜色
          }
        },
        // 3、
        series: seriesData,
        backgroundColor: 'transparent'
      };

      // 更新图表
      this.myChart.setOption(option);
    },
    // Tab 切换事件
    handleTabClick(tab) {
      const cityName = tab.name;

      this.updateChart(cityName);
    }
  },
  mounted() {
    this.initChart();
  }
};
</script>

<style scoped>
.LeftTop {
  width: 100%;
  height: 300px;
  margin-left: 100px;
  margin-top: 140px;
}

h3 {
  text-align: center;
  margin-bottom: 20px;
  color: white;
  font-size: 24px;
  font-weight: bold;
}

.chart {
  margin: 0 auto;
}

.el-tabs {
  margin-bottom: 20px;
}

/* 深度选择器覆盖 Element Plus 默认样式 */
::v-deep .el-tabs__header {
  background-color: white;
  padding: 0 20px;
  border-radius: 4px;
}

::v-deep .el-tabs__item {
  color: #333;
  font-weight: bold;
}

/* 选中 Tab 的文字颜色 */
::v-deep .el-tabs__item.is-active {
  color: #1abc9c;
}

/* 底部边框颜色 */
::v-deep .el-tabs__nav-wrap::after {
  background-color: #ddd;
}
</style>